<template>
  <div class="page-content">
    <div class="page-title">
      <span class="page-title-front">GPU云服务器</span
      ><span class="page-title-des">可以管理您的GPU云服务器，并进行远程连接，监控，续费等基本操作</span>
    </div>
    <div class="page-main">
      <div class="page-main-operation">
        <div>
          <span class="select-name">站点 :</span>
          <a-select class="table-select" defaultValue="-1" @change="list">
            <a-select-option v-for="item in stationList" :key="item.value" :value="item.value">
              {{ item.name }}
            </a-select-option>
          </a-select>
          <div style="margin-left:11px;display:inline-block">
            <a-input
              v-model="searchName"
              autocomplete="off"
              style="width:352px"
              placeholder="选择实例属性项搜索，或者输入关键字识别搜索"
              @pressEnter="handleGpuSearchName"
            >
            </a-input>
            <img
              slot="suffix"
              src="@/assets/image/product/cloudServer/search.png"
              class="gpu_search_button_logo"
              alt="logo"
              @click.stop="handleGpuSearchName"
            />
          </div>
        </div>
        <a-button class="create-btn">新建GPU云服务器</a-button>
      </div>
      <div class="page-table">
        <a-table
          ref="table"
          :columns="columns"
          :row-key="record => record.id"
          :data-source="tableData"
          :loading="loading"
          :pagination="pagination"
          :row-selection="rowSelection"
        >
          <span slot="serverName" slot-scope="text, record">
            <span style="color:#33b0ed;cursor:pointer" @click="detail(record)">{{ record.serverName }}</span>
          </span>
          <span slot="ip" slot-scope="text, record">
            <span>{{ record.publicIp }}(公)</span><br />
            <span>{{ record.privateIp }}(私)</span>
          </span>
          <span slot="serverStatus" slot-scope="text, record">
            <span v-if="record.serverStatus == '0'">异常</span>
            <span v-else-if="record.serverStatus == '1'" class="status_running">运行中</span>
            <span v-else-if="record.serverStatus == '2'">关机</span>
            <span v-else-if="record.serverStatus == '3'">正在创建</span>
            <span v-else-if="record.serverStatus == '4'">正在开机</span>
            <span v-else-if="record.serverStatus == '5'">正在关机</span>
            <span v-else-if="record.serverStatus == '6'">正在重启</span>
            <span v-else>{{ record.serverStatus }}</span>
          </span>
          <span slot="watch" slot-scope="record">
            <template>
              <a-icon :component="watchIcon" style="fontSize: 24px;" @click="performance(record)" />
            </template>
          </span>
          <span slot="setting" slot-scope="text, record">
            <template>
              <span
                >CPU: {{ record.cpuNum }}核 内存: {{ record.memoryNum }}GB 存储: {{ record.storageNum }}GB GPU：{{
                  record.cardNum
                }}*{{ record.cardType }}</span
              >
            </template>
          </span>
          <span slot="type" slot-scope="text, record">
            <template>
              <span>{{ record.type }} 到期时间: {{ record.time }}</span>
            </template>
          </span>
          <span slot="action" slot-scope="text, record">
            <template>
              <span class="table_action" @click="manage(record)">管理</span>
              <span class="table_action" @click="connect(record)">远程连接</span>
              <span class="table_action" @click="band(record)">续费</span>
              <a-select class="table_action" style="width:80px" placeholder="更多">
                <a-select-option key="1" @click="operation(record, 'start')">
                  启动
                </a-select-option>
                <a-select-option key="2" @click="operation(record, 'stop')">
                  停止
                </a-select-option>
                <a-select-option key="3" @click="operation(record, 'restart')">
                  重启
                </a-select-option>
                <a-select-option key="4">
                  绑定
                </a-select-option>
                <a-select-option key="5" disabled>
                  解绑
                </a-select-option>
                <a-select-option key="6">
                  设置安全规则
                </a-select-option>
                <a-select-option key="7">
                  释放
                </a-select-option>
              </a-select>
            </template>
          </span>
        </a-table>
      </div>
      <div class="btn">
        <a-button class="table-btn" :disabled="startBtn" @click="batchOpera('start')">启动</a-button>
        <a-button class="table-btn" :disabled="stopBtn" @click="batchOpera('stop')">停止</a-button>
        <a-button class="table-btn" :disabled="restartBtn" @click="batchOpera('restart')">重启</a-button>
      </div>
    </div>
    <a-modal
      :title="modalTitle"
      :visible="visibleOperation"
      :maskClosable="false"
      :width="480"
      :footer="null"
      @cancel="
        () => {
          visibleOperation = false
        }
      "
    >
      <div class="form-main">
        <div class="content">
          <div class="content-sure">{{ modalTip }}</div>
          <div class="content-inner">
            <div class="content-inner-name">GPU云服务器名称： {{ gpuName || '' }}</div>
            <div class="content-inner-id">GPU云服务器ID： {{ gpuId || '' }}</div>
          </div>
        </div>
        <div class="footer">
          <a-button type="primary" class="footer-button-cancle" @click.stop.prevent="visibleOperation = false">
            取消
          </a-button>
          <a-button
            type="primary"
            class="footer-button-sure"
            :style="{ margin: '0 30px' }"
            @click.stop.prevent="confirm()"
          >
            {{ operationBtn }}
          </a-button>
        </div>
      </div>
    </a-modal>
    <a-modal
      :title="batchTitle"
      :visible="visibleBatch"
      :maskClosable="false"
      :width="540"
      :footer="null"
      @cancel="
        () => {
          visibleBatch = false
        }
      "
    >
      <div class="form-main">
        <div class="content">
          <div class="content-sure">{{ modalBatchTip }}</div>
          <div class="content-batch-inner">
            <div class="batch-inner-header">
              <div class="batch-inner-header-name">GPU云服务器名称</div>
              <div class="batch-inner-header-id">GPU云服务器ID</div>
            </div>
            <div v-for="item of selectList" :key="item.id" class="batch-inner-list">
              <div class="batch-inner-list-name">{{ item.name }}</div>
              <div class="batch-inner-list-id">{{ item.id }}</div>
            </div>
          </div>
        </div>
        <div class="footer">
          <a-button type="primary" class="footer-button-cancle" @click.stop.prevent="visibleBatch = false">
            取消
          </a-button>
          <a-button
            type="primary"
            class="footer-button-sure"
            :style="{ margin: '0 30px' }"
            @click.stop.prevent="confirmBatch()"
          >
            {{ operationBatchBtn }}
          </a-button>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { stationList, gpuList } from '@/api/Console/GpuCloudServe'
import watchIcon from '@/assets/svg/watch.svg'
import GPUModal from '@/components/Console/GPU/GPUModal'
const columns = [
  {
    title: '名称',
    dataIndex: 'serverName',
    scopedSlots: { customRender: 'serverName' }
  },
  {
    title: 'IP地址',
    dataIndex: 'ip',
    scopedSlots: { customRender: 'ip' }
  },
  {
    title: '状态',
    dataIndex: 'serverStatus',
    scopedSlots: { customRender: 'serverStatus' },
    width: '78px'
  },
  {
    title: '监控',
    dataIndex: 'watch',
    scopedSlots: { customRender: 'watch' }
  },
  {
    title: '镜像',
    dataIndex: 'imageName'
  },
  {
    title: '配置',
    dataIndex: 'setting',
    scopedSlots: { customRender: 'setting' }
  },
  {
    title: '付费类型',
    dataIndex: 'type',
    scopedSlots: { customRender: 'type' }
  },
  {
    title: '站点',
    dataIndex: 'stationName',
    scopedSlots: { customRender: 'stationName' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  name: 'GpuCloudServe',
  components: {
    GPUModal
  },
  data() {
    this.columns = columns
    // this.rowSelection = rowSelection
    return {
      pageSize: '10',
      currentPage: '1',
      stationId: '1',
      keyword: '',
      stationList: [],
      searchName: '',
      tableData: [],
      watchIcon,
      modalTitle: '启动GPU云服务器',
      modalTip: '是否要启动GPU云服务器?',
      batchTitle: '批量启动GPU云服务器',
      modalBatchTip: '是否要启动如下GPU云服务器',
      gpuName: '',
      gpuId: '',
      operationBtn: '确认启动',
      operationBatchBtn: '确认启动',
      visibleBatch: false,
      visibleOperation: false,
      startBtn: true,
      stopBtn: true,
      restartBtn: true,
      selectData: null,
      selectList: [],
      pagination: {
        current: 1, // 当前页
        pageSize: 10, // 每页显示条数
        total: 0,
        pageSizeOptions: ['10', '20', '30', '40'],
        showSizeChanger: true, // 改变页面条数
        showQuickJumper: true // 跳页
      },
      loading: false
    }
  },
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
          //异常 重启 过期状态置灰
          //关机状态可进行重启
          //运行状态可进行关机 重启 启动
          this.startBtn = true
          this.stopBtn = true
          this.restartBtn = true
          let stop = false
          let start = false
          let exception = false
          if (selectedRows.length > 0) {
            this.selectData = selectedRows
            for (const i of selectedRows) {
              if (i.status == '1') {
                start = true
              } else if (i.status == '2') {
                //关机状态
                stop = true
              } else {
                exception = true
              }
            }
            if (exception) {
              this.startBtn = true
              this.stopBtn = true
              this.restartBtn = true
            } else {
              if (stop == true && start == false) {
                this.restartBtn = false
              }
              if (stop == false && start == true) {
                this.startBtn = false
                this.stopBtn = false
                this.restartBtn = false
              }
            }
          }
        }
      }
    }
  },
  mounted() {
    this.getStation()
    this.list()
  },
  methods: {
    getStation() {
      {
        const tmp = this
        stationList({ status: 'ONLINE' })
          .then(response => {
            tmp.stationList = [{ name: '全部', value: '-1' }]
            if (response.data) {
              for (const i of response.data) {
                tmp.stationList.push({ name: i.name, value: i.id })
              }
            }
          })
          .catch(function(error) {
            console.log(error)
          })
      }
    },
    handleGpuSearchName() {},
    list() {
      // this.tableData=[{
      //     id: '1',
      //     name: 'vv',
      //     ip: '10.10.10.10',
      //     status: '1',
      //     image: 'CentOS 7.5版本（64位）TensorFlow 版本1',
      //     cpu: '8',
      //     memory: '32',
      //     disk: '20',
      //     gpu: '1',
      //     type: '包年包月',
      //     time: '2022-03-04  19:00:00',
      //     station: '环保园(北京)'
      //   },
      //   {
      //     id: '2',
      //     name: 'www',
      //     ip: '10.10.10.10',
      //     status: '3',
      //     image: 'CentOS 7.5版本（64位）TensorFlow 版本1',
      //     cpu: '8',
      //     memory: '32',
      //     disk: '20',
      //     gpu: '1',
      //     type: '包年包月',
      //     time: '2022-03-04  19:00:00',
      //     station: '环保园(北京)'
      //   },
      //   {
      //     id: '3',
      //     name: 'www',
      //     ip: '10.10.10.10',
      //     status: '2',
      //     image: 'CentOS 7.5版本（64位）TensorFlow 版本1',
      //     cpu: '8',
      //     memory: '32',
      //     disk: '20',
      //     gpu: '1',
      //     type: '包年包月',
      //     time: '2022-03-04  19:00:00',
      //     station: '环保园(北京)'
      //   },
      //   {
      //     id: '4',
      //     name: 'www',
      //     ip: '10.10.10.10',
      //     status: '2',
      //     image: 'CentOS 7.5版本（64位）TensorFlow 版本1',
      //     cpu: '8',
      //     memory: '32',
      //     disk: '20',
      //     gpu: '1',
      //     type: '包年包月',
      //     time: '2022-03-04  19:00:00',
      //     station: '环保园(北京)'
      //   },
      //   {
      //     id: '5',
      //     name: 'www',
      //     ip: '10.10.10.10',
      //     status: '2',
      //     image: 'CentOS 7.5版本（64位）TensorFlow 版本1',
      //     cpu: '8',
      //     memory: '32',
      //     disk: '20',
      //     gpu: '1',
      //     type: '包年包月',
      //     time: '2022-03-04  19:00:00',
      //     station: '环保园(北京)'
      //   }]
      this.loading = true
      const tmp = this
      let param = null
      if (tmp.keyword && tmp.keyword !== '') {
        param = {
          pageSize: tmp.pageSize,
          pageNum: tmp.currentPage,
          stationId: tmp.stationId,
          serverType: 2,
          keyword: tmp.keyword
        }
      } else {
        param = { pageSize: tmp.pageSize, pageNum: tmp.currentPage, stationId: tmp.stationId, serverType: 2 }
      }
      if (tmp.stationId && tmp.stationId !== '-1') {
        param.stationId = tmp.stationId
      }
      gpuList(param)
        .then(response => {
          tmp.loading = false
          tmp.tableData = response.data.rows
          const pagination = { ...this.pagination }
          pagination.total = Number(response.data.total)
          this.pagination = pagination
        })
        .catch(function(error) {
          console.log(error)
        })
    },
    operation(record, tag) {
      this.gpuName = record.name
      this.gpuId = record.id
      if (tag == 'start') {
        this.modalTitle = '启动GPU云服务器'
        this.modalTip = '是否要启动GPU云服务器？'
        this.operationBtn = '确认启动'
      } else if (tag == 'stop') {
        this.modalTitle = '停止GPU云服务器'
        this.modalTip = '是否要停止GPU云服务器？'
        this.operationBtn = '确认停止'
      } else {
        this.modalTitle = '重启GPU云服务器'
        this.modalTip = '是否要重启GPU云服务器？'
        this.operationBtn = '确认重启'
      }
      this.visibleOperation = true
    },
    batchOpera(tag) {
      if (tag == 'start') {
        this.batchTitle = '批量启动GPU云服务器'
        this.modalBatchTip = '是否要启动如下GPU云服务器？'
        this.operationBatchBtn = '确认启动'
      } else if (tag == 'stop') {
        this.batchTitle = '批量停止GPU云服务器'
        this.modalBatchTip = '是否要停止如下GPU云服务器？'
        this.operationBatchBtn = '确认停止'
      } else {
        this.batchTitle = '批量重启GPU云服务器'
        this.modalBatchTip = '是否要重启如下GPU云服务器？'
        this.operationBatchBtn = '确认重启'
      }
      this.selectList = []
      this.selectData.forEach(item => {
        this.selectList.push({ id: item.id, name: item.name })
      })
      this.visibleBatch = true
    },
    detail(row) {
      this.$router.push({
        name: 'console/gpu-detail',
        query: {
          id: row.serverUuid,
          pageSize: this.pageSize,
          pageNum: this.currentPage,
          stationId: this.stationId
        }
      })
    },
    band(row) {
      alert(row.id)
      this.$router.push({ name: 'Renew', query: { id: row.id } })
    }
  }
}
</script>
<style scoped lang="less">
.page-content {
  width: 100%;
  min-width: 1238px;
  .page-title {
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: #ffffff;
    padding-left: 30px;
    margin-top: 14px;
    margin-bottom: 6px;
    .page-title-front {
      font-size: 16px;
      color: #333;
      margin-right: 20px;
    }
    .page-title-des {
      font-size: 14px;
      color: #333;
    }
  }
  .page-main {
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding: 30px;
    .page-main-operation {
      display: flex;
      height: 30px;
      line-height: 30px;
      justify-content: space-between;
      .select-name {
        margin-right: 10px;
        font-size: 14px;
        color: #333333;
      }
      .table-select {
        width: 160px;
        height: 30px;
        border-radius: 2px;
        border: solid 1px #e1e5ee;
      }
      /deep/.ant-input-affix-wrapper .ant-input-suffix {
        right: 0;
      }
      .create-btn {
        width: 140px;
        height: 36px;
        background-color: #33b0ed;
        border-radius: 2px;
        color: #fff;
        font-size: 14px;
        line-height: 36px;
      }
      .gpu_search_button_logo {
        position: relative;
        bottom: 2px;
        height: 30px;
      }
    }
    .page-table {
      margin-top: 30px;
      /deep/.ant-checkbox-checked .ant-checkbox-inner {
        background-color: #33b0ed;
        border-color: #33b0ed;
      }
    }
  }
}
</style>
